<template>
  <div>
    <div class="buttons">
      <vxe-button @click="addAsset">新增资产</vxe-button>
      <vxe-button @click="delAsset">删除资产</vxe-button>
      <vxe-button @click="saveAsset">保存</vxe-button>
    </div>
    <div>
      <vxe-table :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell' }"
                 :checkbox-config="{ highlight: true }"
                 @checkbox-change="changeAsset" @checkbox-all-change="changeAllAsset">
        <vxe-table-column type="checkbox" width="60"></vxe-table-column>
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="type" title="类型" :edit-render="{
                                immediate: true,
                                name: '$select',
                                props: {type: 'select'},
                                options: typeOptions,
                                events: {
                                }
        }">
        </vxe-table-column>
        <vxe-table-column field="subType" title="子类型" :edit-render="{
                                immediate: true,
                                name: '$select',
                                props: {type: 'select'},
                                options: subTypeOptions,
                                events: {
                                  focus: updateSubTypeOptions
                                }
        }">
        </vxe-table-column>
        <vxe-table-column field="code" title="资产号" :edit-render="{
                                immediate: true,
                                name: 'input',
                                attrs: {type: 'text'}
        }">
        </vxe-table-column>
        <vxe-table-column field="amount" title="金额" :edit-render="{
                                immediate: true,
                                name: 'input',
                                attrs: {type: 'text'}
        }">
        </vxe-table-column>
      </vxe-table>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: "AssetList",
  data() {
    return {
      hello: 'hello world',
      typeOptions: [
        {label: '银行卡', value: '银行卡'},
        {label: '支付宝', value: '支付宝'},
        {label: '微信', value: '微信'},
        {label: '现金', value: '现金'},
        {label: '保险', value: '保险'},
        {label: '公积金', value: '公积金'},
        {label: '股票', value: '股票'},
        {label: '基金', value: '基金'},
      ],
      subTypeOptions: [],
      tableData: [
        {type: '银行卡', subType: '工商银行', code: '10001', amount: 50000},
        {type: '现金', subType: '', code: '', amount: 100},
      ],
      selectedData: [],
    }
  },
  mounted() {
    this.loadData();
  },
  computed: {},
  methods: {
    updateSubTypeOptions({row}) {
      const type = row.type;
      if (type === null || type === '') {
        this.subTypeOptions = [];
        return;
      }
      if (type === '银行卡') {
        this.subTypeOptions = [
          {label: '工商银行', value: '工商银行'},
          {label: '建设银行', value: '建设银行'},
          {label: '中国银行', value: '中国银行'},
          {label: '农业银行', value: '农业银行'},
          {label: '交通银行', value: '交通银行'},
          {label: '招商银行', value: '招商银行'},
          {label: '浦发银行', value: '浦发银行'},
          {label: '兴业银行', value: '兴业银行'},
          {label: '光大银行', value: '光大银行'},
        ]
      } else if (type === '支付宝') {
        this.subTypeOptions = [
          {label: '余额', value: '余额'},
          {label: '基金', value: '基金'},
          {label: '黄金', value: '黄金'},
          {label: '余额宝', value: '余额宝'},
          {label: '银行存款', value: '银行存款'},
        ]
      } else if (type === '保险') {
        this.subTypeOptions = [
          {label: '养老', value: '养老'},
          {label: '医疗', value: '医疗'},
          {label: '重疾险', value: '重疾险'},
        ]
      }else if (type === '微信'){
        this.subTypeOptions = [
          {label: '余额', value: '余额'},
        ]
      } else {
        this.subTypeOptions = [{
          label: type, value: type
        }];
      }
    },
    addAsset() {
      this.tableData.push({seq: this.tableData.length + 1, type: '', code: '', amount: 0})
    },
    delAsset() {
      this.tableData = this.tableData.filter(item => {
        return !this.selectedData.includes(item)
      });
    },
    changeAsset({records}) {
      this.selectedData = records;
      console.log('rows', JSON.stringify(records))
    },
    changeAllAsset(records){
      console.log('all', JSON.stringify(records));
    },
    loadData() {
      request({
        url: '/asset',
        method: 'get',
      }).then(response => {
        if (response && response.data) {
          const tempList = [];
          response.data.records.forEach(item => {
            tempList.push({
              type: item.type,
              subType: item.subType,
              code: item.code,
              amount: item.amount
            })
          })
          this.tableData = tempList;
        }
      }).catch(error => {
        console.log('error', error);
        this.$message.error('加载数据失败')
      })
    },
    saveAsset() {
      const self = this;
      request({
        url: '/asset/batch',
        method: 'post',
        data: self.tableData
      }).then(response => {
        if (response && response.data) {
          this.$message.success('保存成功')
        }
      }).catch(error => {
        console.log('error', error);
        this.$message.error('保存失败')
      })
    }
  },
}
</script>

<style scoped>
.buttons {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

</style>